<template>
  <div class="part">
    <div class="part-top">
      <Layer v-bind="layerPost1" style="padding-bottom: 0.25rem;">
        <div class="fill-box">
          <div class="fill-box" style="margin: 0 7%;">
            <div id="chart-part3-t1"></div>
            <div class="chart-post1-bg"></div>
            <div class="chart-post1-info"></div>
            <div class="chart-post1-percent-green">
              <span>未使用（算力）</span>
              <span class="green">{{ infoPercentData1[1] }}</span>
            </div>
            <div class="chart-post1-percent-orange">
              <span>已使用</span>
              <span class="orange">{{ infoPercentData1[0] }}</span>
            </div>
          </div>
          <div class="fill-box" style="margin: 0 7%;">
            <div id="chart-part3-t2"></div>
            <div class="chart-post1-bg"></div>
            <div class="chart-post1-info"></div>
            <div class="chart-post1-percent-green">
              <span>未使用（存储）</span>
              <span class="green">{{ infoPercentData1[3] }}</span>
            </div>
            <div class="chart-post1-percent-orange">
              <span>已使用</span>
              <span class="orange">{{ infoPercentData1[2] }}</span>
            </div>
          </div>
        </div>
      </Layer>
      <Layer v-bind="layerPost2">
        <div id="chart-part3-t3"></div>
      </Layer>
    </div>
    <Layer v-bind="layerPost3" style="padding: 0.25rem 1.25rem 0;">
      <div id="chart-part3-m1"></div>
    </Layer>
    <Layer v-bind="layerPost4" style="padding: 0.5rem 1.25rem;">
      <div id="chart-part3-b1"></div>
    </Layer>
  </div>
</template>

<script>
import Layer from './LayerItem.vue'
import { NumFormat, gradientColor } from '../utils'
import * as echarts from 'echarts'
export default {
  name: 'ViewPart3',
  components: { Layer },
  data() {
    return {
      data1_1: [
        { value: 1000, name: '已使用', itemStyle: { color: '#da6229' } },
        { value: 700, name: '未使用', itemStyle: { color: '#21f1f2' } },
      ],
      data1_2: [
        { value: 1000, name: '已使用', itemStyle: { color: '#da6229' } },
        { value: 400, name: '未使用', itemStyle: { color: '#21f1f2' } },
      ],
      data2: [
        [
          {
            key: '',
            value: 123,
          },
        ],
        [
          {
            key: '',
            value: 452,
          },
        ],
      ],
      data3: [
        {
          key: '周一',
          value: 93,
        },
        {
          key: '周二',
          value: 82,
        },
        {
          key: '周三',
          value: 91,
        },
        {
          key: '周四',
          value: 86,
        },
        {
          key: '周五',
          value: 98,
        },
        {
          key: '周六',
          value: 99,
        },
        {
          key: '周七',
          value: 87,
        },
      ],
      data4: [],
    }
  },
  computed: {
    infoPercentData1({ data1_1 = [], data1_2 = [] }) {
      const res = []
      res.push(NumFormat(data1_1[0]?.value))
      res.push(NumFormat(data1_1[1]?.value))
      res.push(NumFormat(data1_2[0]?.value))
      res.push(NumFormat(data1_2[1]?.value))
      return res
    },
    layerPost1() {
      return {
        title: '资源',
      }
    },
    layerPost2() {
      return {
        title: '作业状态',
      }
    },
    layerPost3() {
      return {
        title: '计算资源利用率',
      }
    },
    layerPost4() {
      return {
        title: '节点状态',
      }
    },
  },
  mounted() {
    this.drawPost1_1(this.data1_1)
    this.drawPost1_2(this.data1_2)
    this.drawPost2(this.data2)
    this.drawPost3(this.data3)
    this.drawPost4(this.data4)
  },
  methods: {
    getDataPost1_1() {},
    getDataPost1_2() {},
    getDataPost2() {},
    drawPost1_1(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart-part3-t1'))
      // 绘制图表
      const option = {
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: '32px',
          },
          formatter: (params) => {
            const { name, marker, value } = params
            let newMarker = marker.replace(
              /(.*border-radius:)(\d*)(px.*)/,
              '$124$3',
            )
            newMarker = newMarker.replace(/(.*width:)(\d*)(px.*)/, '$124$3')
            newMarker = newMarker.replace(/(.*height:)(\d*)(px.*)/, '$124$3')
            console.log(newMarker)
            return `${newMarker} ${name}  ${value}`
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['75%', '90%'],
            label: {
              show: false,
              position: 'center',
            },
            data,
            startAngle: 45,
          },
        ],
      }
      myChart.setOption(option)
    },
    drawPost1_2(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart-part3-t2'))
      // 绘制图表
      const option = {
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: '32px',
          },
          formatter: (params) => {
            const { name, marker, value } = params
            console.log(params)
            let newMarker = marker.replace(
              /(.*border-radius:)(\d*)(px.*)/,
              '$124$3',
            )
            newMarker = newMarker.replace(/(.*width:)(\d*)(px.*)/, '$124$3')
            newMarker = newMarker.replace(/(.*height:)(\d*)(px.*)/, '$124$3')
            console.log(newMarker)
            return `${newMarker} ${name}  ${value}`
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['75%', '90%'],
            label: {
              show: false,
              position: 'center',
            },
            data,
            startAngle: 45,
          },
        ],
      }
      myChart.setOption(option)
    },
    drawPost2(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart-part3-t3'))
      // 绘制图表
      const option = {
        textStyle: {
          fontSize: '30px',
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: '32px',
          },
          formatter: (params) => {
            console.log(params)
            const param = params[0]
            const { value } = param
            const param1 = params[1]
            const { value: value1 } = param1
            const newMarker = `<span style="display:inline-block;margin-right:4px;border-radius:24px;width:24px;height:24px;background-color:#b6f7f7;"></span>`
            const newMarker1 = `<span style="display:inline-block;margin-right:4px;border-radius:24px;width:24px;height:24px;background-color:#32e9ea;"></span>`
            return `<div>${newMarker} 排队  ${value}</div><div>${newMarker1} 运行  ${value1}</div>`
          },
        },
        xAxis: {
          type: 'category',
          axisPointer: {
            type: 'shadow',
          },
          axisLabel: {
            fontSize: '32px',
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#bbb',
            },
          },
          axisTick: {
            show: false,
          },
          data: data[0].map((i) => i.key),
        },
        yAxis: {
          type: 'value',
          name: '个',
          axisLabel: {
            fontSize: '30px',
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#bbb',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#2d3036',
            },
          },
        },
        grid: {
          left: '15%',
          right: '5%',
          top: '20%',
          bottom: '5%',
        },
        legend: {
          data: ['排队', '运行'],
          itemGap: 5,
          textStyle: {
            color: '#fff',
          },
          top: '10%',
        },
        series: [
          {
            name: '排队',
            data: data[0],
            type: 'bar',
            symbolSize: 0,
            lineStyle: {
              color: '#21f1f2',
            },
            itemStyle: {
              color: '#fff',
            },
            barWidth: 20,
          },
          {
            name: '运行',
            data: data[1],
            type: 'bar',
            symbolSize: 0,
            lineStyle: {
              color: '#e87a21',
            },
            itemStyle: {
              color: '#21e7e8',
            },
            barGap: '1100%',
            barWidth: 20,
          },
        ],
      }
      myChart.setOption(option)
    },
    drawPost3(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart-part3-m1'))
      const option = {
        textStyle: {
          fontSize: '30px',
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: '32px',
          },
          formatter: (params) => {
            const param = params[0]
            const { axisValueLabel, value } = param
            const marker = `<span style="display:inline-block;margin-right:4px;border-radius:24px;width:24px;height:24px;background-color:#32e9ea;"></span>`
            return `${marker} ${axisValueLabel}  ${value}%`
          },
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            fontSize: '24px',
          },
          axisLine: {
            lineStyle: {
              color: '#bbb',
            },
          },
          axisTick: {
            show: false,
          },
          boundaryGap: false,
          data: data.map((i) => i.key),
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: '24px',
          },
          name: '%',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#bbb',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#2d3036',
            },
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          top: '11%',
          bottom: '11%',
        },
        series: [
          {
            type: 'line',
            data,
            symbolSize: 0,
            lineStyle: {
              color: '#21f1f2',
            },
            markLine: {
              data: [
                {
                  name: "平均值",
                  type: "average",
                  label: {
                    formatter: "{b}: {c}",
                    position: "middle",
                    color: "#fff"
                  },
                  lineStyle: {
                    color: "#fff"
                  }
                }
              ]
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#21f1f255', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#21f1f200', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      }
      // 绘制图表
      myChart.setOption(option)
    },
    drawPost4() {
      // prettier-ignore
      const hours = [
        '12a', '1a', '2a', '3a', '4a', '5a', '6a',
        '7a', '8a', '9a', '10a', '11a',
        '12p', '1p', '2p', '3p', '4p', '5p',
        '6p', '7p', '8p', '9p', '10p', '11p'
      ]
      // prettier-ignore
      const days = [
        'Saturday', 'Friday', 'Thursday',
        'Wednesday', 'Tuesday', 'Monday', 'Sunday'
      ]
      // prettier-ignore
      const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
      .map((item)=> {
        return [item[1], item[0], item[2] || '-'];
      })
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart-part3-b1'))
      const option = {
        tooltip: {
          position: 'top',
          textStyle: {
            fontSize: '32px',
          },
        },
        grid: {
          height: '85%',
          width: '94%',
          left: '3%',
          top: '10%',
          bottom: '4%',
        },
        xAxis: {
          type: 'category',
          data: hours,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          type: 'category',
          data: days,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        visualMap: {
          type: 'piecewise',
          pieces: [
            {
              min: 7,
              color: gradientColor('#e1a282', '#c1484e', 1),
            },
            {
              min: 6,
              max: 6,
              color: gradientColor('#e1a282', '#c1484e', 0.75),
            },
            {
              min: 5,
              max: 5,
              color: gradientColor('#e1a282', '#c1484e', 0.5),
            },
            {
              min: 4,
              max: 4,
              color: gradientColor('#e1a282', '#c1484e', 0.25),
            },
            {
              min: 3,
              max: 3,
              color: gradientColor('#e1a282', '#c1484e', 0),
            },
            { min: 2, max: 2, color: '#99e9d3' },
            { max: 1, color: 'transparent' },
          ],
        },
        color: ['#2d3036'],
        series: [
          {
            name: 'Punch Card',
            type: 'heatmap',
            data: data,
          },
        ],
      }
      // 绘制图表
      myChart.setOption(option)
    },
  },
}
</script>

<style scoped>
.part {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.part-top {
  height: 100%;
  display: flex;
}
.fill-box {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
}
.chart-post1-bg {
  z-index: -1;
  padding: 50%;
  width: 0;
  height: 0;
  position: absolute;
  pointer-events: auto;
  image-rendering: -webkit-optimize-contrast;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../assets/pie-bg.png);
  -webkit-mask-image: none;
  -webkit-mask-repeat: initial;
  -webkit-mask-size: initial;
  background-color: initial;
  border-radius: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: translate(0, -0.5rem);
}
.chart-post1-info {
  z-index: -1;
  width: 150%;
  height: 50%;
  position: absolute;
  pointer-events: auto;
  image-rendering: -webkit-optimize-contrast;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../assets/pie-info.png);
  -webkit-mask-image: none;
  -webkit-mask-repeat: initial;
  -webkit-mask-size: initial;
  background-color: initial;
  border-radius: 0;
  top: 0;
  bottom: 0;
  left: -25%;
  margin: auto;
}
.chart-post1-percent-green {
  color: #fff;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 8%;
  left: -25%;
}
.chart-post1-percent-orange {
  color: #fff;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 77%;
  left: 94%;
}
.chart-post1-percent-green span,
.chart-post1-percent-orange span {
  display: block;
  width: 3.125rem;
}
.chart-post1-percent-orange span.orange {
  color: #e6662a;
}
.chart-post1-percent-green span.green {
  color: #21f1f2;
}
.chart-post1-percent-green span:first-child,
.chart-post1-percent-orange span:first-child {
  color: rgb(208, 210, 212);
  font-weight: normal;
  font-family: AlibabaPuHuiTi, Arial, 'sans-serif';
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: normal;
  margin: 0px 0px 0.21875rem;
  width: 100%;
}
.chart-post1-percent-green span:last-child,
.chart-post1-percent-orange span:last-child {
  background-color: rgba(51, 51, 51, 0);
  background-image: null;
  display: inline-block;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
  height: auto;
  line-height: normal;
  font-size: 1.125rem;
  font-weight: bolder;
  letter-spacing: 0.02em;
  margin-right: 0em;
  border-radius: 0;
}
</style>
